import React, { useEffect, useState } from "react";
import "./style.scss";
import icon from "../../assets/images/icon/hdpi/common_nav_message_black_n.png";
import icon1 from "../../assets/images/icon/hdpi/common_nav_message_black_s.png";
import consultation from "../../assets/images/image/hdpi/inquiry_bg.png";
import answer from "../../assets/images/image/hdpi/promise_bg.png";
import doctor from "../../assets/images/image/hdpi/doctor.png";
import { useAppSelector } from "../../store/hooks";
import { useNavigate } from "react-router-dom";
import { useRequest } from "ahooks";
import { getDoctorNoticeReadNum } from "../../api/my";
const Index: React.FC = () => {
  interface NoticeRawState {
    notReadNum: number;
    noticeType: number;
  }
  const navigate = useNavigate();
  const [isShow, setIsShow] = useState<boolean>(false);
  const imagePic = useAppSelector((state) => state.user.doctor.imagePic);
  const inauguralHospital = useAppSelector(
    (state) => state.user.doctor.inauguralHospital
  );
  const jobTitle = useAppSelector((state) => state.user.doctor.jobTitle);
  const name = useAppSelector((state) => state.user.doctor.name);
  const departmentName = useAppSelector(
    (state) => state.user.doctor.departmentName
  );
  const { data: noticeReadNum = [] } = useRequest<NoticeRawState[], []>(
    async () => {
      let resp = await getDoctorNoticeReadNum();
      return resp.result;
    }
  );
  useEffect(() => {
    noticeReadNum.map((item: NoticeRawState) => {
      if (item.notReadNum !== 0) return setIsShow(true);
      else return setIsShow(false);
    });
  }, []);
  return (
    <div className="home">
      <div className="item">
        <div className="title">
          <span>主要业务</span>
          <img onClick={() => navigate('/my/message')} src={isShow ? icon1 : icon} alt="" className="icon" />
        </div>
        <div
          className="opration"
          onClick={() => navigate("/consultation/consultationlist")}
        >
          <img src={consultation} alt="" style={{ maxWidth: "320px" }} />
          <span className="tip">问诊</span>
          <div className={isShow ? "show" : "hide"}>
            <div className="newInformation">有新消息</div>
            <img src={doctor} alt="" className="doctor" />
          </div>
        </div>
        <div className="opration" onClick={() => navigate("/patient/circle")}>
          <img
            src={answer}
            alt=""
            style={{ maxWidth: "320px", boxShadow: "4px 4px 4px #ddd" }}
          />
          <span className="tip">答疑</span>
        </div>
      </div>
      <div className="item">
        <div className="title">
          <span>我的信息</span>
          <img src="" alt="" />
        </div>
        <div className="opration-manage" onClick={() => navigate("/my")}>
          <span className="tip">管理</span>
          <img src={imagePic} alt="" className="avatar" />
          <div className="userInfo">
            <div className="nickName">{name}</div>
            <div className="hospital">{inauguralHospital}</div>
            <div className="position">{jobTitle}</div>
            <div className="department">{departmentName}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
